{extend name="common:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/home/css/swiper.min.css"/>
{/block}

{block name="content"}
<div class="index-banner">
    <div class="swiper-container indexBan">
        <div class="swiper-wrapper">
            {foreach ($list as $v)}
            <!--<div class="swiper-slide" style="background:url({$v.image}) center top no-repeat;"></div>-->
            <a class="swiper-slide" href="{$v.url}" target="_blank">
                <img src="{$v.image}" height="100%" width="100%" />
            </a>
            {/foreach}
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>
<section class="container overfhide">
    <div style="margin-top: 20px;text-align: center;font-size: 30px;margin-bottom: 10px;">
        服务项目
    </div>
    <ul class="prolist">
        {foreach($product1.data as $v)}
        <li>
            <a href="/product/detail/{$v.id}" class="proimg"><span></span><img src="{$v.cover}"/></a>
            <a href="/product/detail/{$v.id}" class="protxt"><h2>{$v.title}</h2></a>
        </li>
        {/foreach}

        <div class="clear"></div>
    </ul>
</section>
<section class="container overfhide">
    <div style="margin-top: 20px;text-align: center;font-size: 30px;margin-bottom: 10px;">
        项目案例
    </div>
    <ul class="prolist">
        {foreach($product2.data as $v)}
        <li>
            <a href="/product/detail/{$v.id}" class="proimg"><span></span><img src="{$v.cover}"/></a>
            <a href="/product/detail/{$v.id}" class="protxt"><h2>{$v.title}</h2></a>
        </li>
        {/foreach}

        <div class="clear"></div>
    </ul>
</section>
{/block}

{block name="js"}
<script type="text/javascript" src="/static/home/js/swiper-3.4.2.min.js"></script>
<script>
    var swiper = new Swiper('.indexBan', {
        nextButton: '.left',
        prevButton: '.right',
        paginationClickable: true,
        autoplay : 5000,
        loop:true
    });
</script>
{/block}